<template>
  <PageMain>
    <template #header></template>
    <template #body>
      <div class="main-container">
        <div class="details-header-content">
          <img src="@/assets/images/report-icon.png" alt="" class="report-show-icon" />
          <div class="details-header-desc">
            <p class="details-header-title">城市数据资产服务平台企业2024年报表</p>
            <div class="details-header-code-box">
              <span class="details-header-code-title">统一社会信用代码：</span>
              <span class="details-header-code-value">信息文本</span>
            </div>
            <div class="details-header-module">
              <div class="common-module">
                <div class="details-module-title">数据资产</div>
                <div class="details-module-value">
                  <span style="font-size: 24px">{{ '4' }}</span
                  >{{ '个' }}
                </div>
              </div>
              <div class="common-module">
                <div class="details-module-title">已入表额度</div>
                <div class="details-module-value">
                  <span style="font-size: 24px">{{ '0' }}</span
                  >{{ '万元' }}
                </div>
              </div>
              <div class="common-module">
                <div class="details-module-title">费用化支出</div>
                <div class="details-module-value">
                  <span style="font-size: 24px">{{ '1.01' }}</span
                  >{{ '万元' }}
                </div>
              </div>
              <div class="common-module">
                <div class="details-module-title">累计摊销</div>
                <div class="details-module-value">
                  <span style="font-size: 24px">{{ '0' }}</span
                  >{{ '万元' }}
                </div>
              </div>
              <div class="common-module">
                <div class="details-module-title">累计减值</div>
                <div class="details-module-value">
                  <span style="font-size: 24px">{{ '4' }}</span
                  >{{ '万元' }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <AssetCollect />
        <DataView />
        <Association />
        <Asset />
        <Amortize />
        <Impairment />
      </div>
    </template>
  </PageMain>
</template>

<script setup lang="ts">
import Amortize from './Amortize.vue';
import Asset from "./Asset.vue";
import AssetCollect from './AssetCollect.vue';
import Association from './Association.vue';
import DataView from "./DataView.vue";
import Impairment from './Impairment.vue';
</script>

<style lang="less" scoped>
.main-container {
  height: 100%;
  overflow-y: scroll;
  padding: 20px 24px 24px;
}
.details-header-code-box {
  margin-top: 16px;
}
.details-header-content {
  display: flex;
  border: 1px solid #ebf0fa;
  border-radius: 8px;
  padding-top: 20px;
  padding-left: 20px;
}
.report-show-icon {
  width: 115px;
  height: 152px;
  flex-shrink: 0;
  margin-right: 24px;
}

.details-header-desc {
  flex: 1;
}
.details-header-title {
  color: #394d73;
  font-weight: 700;
}

.details-header-code-title {
  color: #a3b0cc;
}

.details-header-code-value {
  color: #465a80;
}

.details-header-module {
  display: flex;
  margin-top: 21px;
}
.common-module {
  flex: 1;
  width: 0;
  background-color: #f7f9fc;
  border-radius: 8px;
  margin-right: 12px;
  text-align: center;
  padding: 10px;
  &:last-child {
    margin-right: 0px;
  }
}
.details-module-title {
  color: #465a80;
}
.details-module-value {
  color: #465a80;
  font-weight: 700;
}
</style>
